Questions

41 of 50

1What is a pseudo-class in CSS?

2How are pseudo-classes different from pseudo-elements?

3What is the syntax of a pseudo-class in CSS?

4Give some commonly used pseudo-classes.

5What does the :hover pseudo-class do?

6What’s the purpose of the :active pseudo-class?

7How does the :visited pseudo-class work for links?

8What is the :focus pseudo-class used for?

9What does the :checked pseudo-class do?

10How does the :disabled pseudo-class behave?

11What is the difference between :first-child and :first-of-type?

12How do :nth-child() and :nth-of-type() differ?

13How do you select every odd or even element using pseudo-classes?

14How can you style an element when it’s being hovered over along with its child?

15What does the :not() pseudo-class do?

16How can you use multiple pseudo-classes together?

17What is the difference between :link and :visited?

18What does the :target pseudo-class represent?

19How can you use :empty to detect empty elements?

20How does the :root pseudo-class differ from the html selector?

21What does the :valid and :invalid pseudo-class do?

22How can you use :required and :optional pseudo-classes in forms?

23What is the use of :in-range and :out-of-range?

24What does :read-only and :read-write do?

25How can you style an input field when it’s autofilled?

26How does the :focus-within pseudo-class work?

27What’s the difference between :focus and :focus-visible?

28What is the purpose of the :placeholder-shown pseudo-class?

29How can you style a checkbox when it is checked or unchecked?

30How can you style invalid form inputs without JavaScript?

31Can pseudo-classes be chained together? Give an example.

32What is the specificity of pseudo-classes compared to normal selectors?

33How can you use :not() effectively to exclude elements from styling?

34How does :has() pseudo-class work, and why is it powerful?

35Is :has() supported in all browsers?

36How does :is() differ from :where() in terms of specificity?

37How can you combine :is() or :where() with other selectors for cleaner code?

38What’s the difference between :nth-child() and :nth-last-child()?

39How can you style only the last element of a list using pseudo-classes?

40What does the :lang() pseudo-class do?

41How do you change a button’s color when hovered but not when disabled?

42How can you highlight the current section in a menu using :target?

43How can you style a form field differently when focused and valid?

44How do you style every third list item differently?

45How can you style alternate table rows without adding extra classes?

46How do you hide empty <p> tags using pseudo-classes?

47How can you style the parent when any child inside it is focused?

48How can you highlight a link only when it’s both focused and hovered?

49How can you style the first letter of only the first paragraph using pseudo-classes?

50How would you use :has() to select a <div> that contains an image?

CSS

Text formatters

Pseudo elements

Transformation and Transition

Everything else

41 / 50

How do you change a button’s color when hovered but not when disabled?

Using :hover with :not(:disabled) in CSS

You can style buttons on hover while excluding disabled buttons by combining the :hover pseudo-class with the :not() pseudo-class. This ensures the hover effect only applies to enabled buttons.

Key Points

1
:hover – Targets an element when the user hovers over it.
2
:not(:disabled) – Excludes elements that are disabled.
3
Combining them ensures interactive styles are applied only to elements that can be interacted with.

Example: Hover Color for Enabled Buttons

In this example, hovering over the 'Submit' button changes its background to dark blue, but the disabled 'Cancel' button remains gray and unresponsive to hover.

Best Practices

1
Always indicate disabled state visually to improve accessibility.
2
Combine :not(:disabled) with other pseudo-classes for interactive effects, like :focus or :active.
3
Keep hover effects subtle to maintain good UX and avoid confusion.
4
Test across browsers for consistent behavior, as some older browsers may render styles differently.

Difficulty: 3/10

Topics: CSS pseudo-classes, state-specific styling, selector specificity

Scenario Questions

0-2 years experience

1
How would you change a button’s background color to blue when hovered, but make sure it stays gray when it’s disabled?
2
What happens if you write .button:hover { background: blue; } and .button:disabled { background: gray; } but the hover color still shows when disabled?

2-5 years experience

1
A button in our form keeps showing the hover color even when disabled — how would you debug and fix this?
2
We’re using a CSS framework and can’t modify the base button styles — how would you override hover behavior only for non-disabled buttons without breaking other components?

5-8 years experience

1
How would you design a reusable button component that handles hover and disabled states cleanly across multiple themes without specificity conflicts or CSS bloat?
2
In a large UI library, how do you ensure hover styles never accidentally override disabled states when developers use custom variants or dynamic class toggling?

8+ years experience

1
How would you architect a theming system where hover and disabled states are decoupled and configurable at the design system level, ensuring backward compatibility during legacy component migrations?
2
When scaling a design system across 50+ products, how do you prevent CSS state conflicts like hover overriding disabled from becoming a recurring cross-team bug?

Follow-up Questions

❓What if the button is both disabled and hovered — which style wins?
❓How would you debug if the hover color still applies when disabled?
❓Could you do this without adding extra classes?